<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Encapsulating</title>

    <style type="text/css">
        div {
            position: absolute;
            top: 30px;
            left: 50px;
        }

        #div2 {
            opacity: 0.0; filter: alpha(opacity=0);
        }

        /* #div1 img {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig01.png, sizingMethod='scale');
        }

        #div2 img {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=example9.12_fig02.png, sizingMethod='scale');
        } */

    </style>

    <script type="text/javascript">
    //<![CDATA[
        var theobjs = new Array();

        function DivObj(obj) {
            this.obj = obj;

            this.objGetOpacity = function() {
                return parseFloat(this.obj.style.opacity);
            }

            this.alphaOpacity = function(value) {
                if(typeof value == "number") {
                    var opacity = value*100;
                    this.obj.style.filter = "alpha(opacity=" + opacity + ")";
                }
                else {
                    throw "NotANumber";
                }
            }

            this.cssOpacity = function(value) {
                if(typeof value == "number") {
                    this.obj.style.opacity = ""+value;
                }
                else {
                    throw "NotANumber";
                }
            }

            this.objSetOpacity = function(value) {
                value = "alphas is " + value;
                try {                    
                    this.alphaOpacity(value);
                    this.cssOpacity(value);
                }
                catch(e) {
                    alert(e);
                }
            }
        }

        window.onload = function() {
            theobjs["div1"] = new DivObj(document.getElementById("div1"));
            theobjs["div2"] = new DivObj(document.getElementById("div2"));

            theobjs["div1"].objSetOpacity(1.0);
            theobjs["div2"].objSetOpacity(0.0);
        }

        document.onclick = function() {
            // fade-out the div1
            var currentOpacity = theobjs["div1"].objGetOpacity();

            if (currentOpacity <= 0) {
                document.onclick = null;
                return;
            }

            currentOpacity -= 0.1;
            theobjs["div1"].objSetOpacity(currentOpacity);

            // display div2
            currentOpacity = theobjs["div2"].objGetOpacity();

            currentOpacity += 0.1;
            theobjs["div2"].objSetOpacity(currentOpacity);
        }
    //]]>

    </script>
    
</head>
<body>
    <div id="div1">
        <img src="example9.12_fig01.png" alt="" />
    </div>


    <div id="div2">
        <img src="example9.12_fig02.png" alt="" />
    </div>
</body>
</html>
